<!-- <template>
    <div>

    <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input 
        style="width: 240px; margin-right: 10px;" 
        v-model="data.name" 
        placeholder="请输入名称查询" 
        :prefix-icon="Search">
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="warning">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
        <el-button type="primary">新增</el-button>
        <el-button type="warning">批量删除</el-button>
        <el-button type="sinfo">导入</el-button>
        <el-button type="info">详情</el-button>
        <el-button type="success">导出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
        <el-table :data="data.tableDate" stripe>
        <el-table-column label="日期" prop="data"/>
        <el-table-column label="名称" prop="name"/>
        <el-table-column label="地点" prop="address"/>
        </el-table>
        <div style="margin-top: 15px">
          <el-pagination
            :current-page="data.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="data.total"
          />


        </div>
    </div>
  </div>

    </div>
</template>

<script setup>
import {reactive} from "vue"
import {Search} from "@element-plus/icons-vue";

const data = reactive({
    name: null,
    tableDate: [
        {id:1, data:'2024-01-01', name:'张三', sex:'男', age:'18', address:'北京'},
        {id:2, data:'2024-01-01', name:'李四', sex:'女', age:'18', address:'北京'},
        {id:3, data:'2024-01-01', name:'王五', sex:'男', age:'18', address:'北京'},
    ],
    pageNum: 1,
    pageSize: 10,
    total:"47"
})
</script>

<style scoped>

</style> -->

<template>
  <div>
    <div class="card" style="margin-bottom: 5px;">
      <el-input 
        style="width: 240px; margin-right: 10px;" 
        v-model="data.name" 
        placeholder="请输入名称查询" 
        :prefix-icon="Search">
      </el-input>
      <el-button type="primary">查询</el-button>
      <el-button type="warning">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-button type="primary">新增</el-button>
      <el-button type="warning">批量删除</el-button>
      <el-button type="info">导入</el-button>
      <el-button type="info">详情</el-button>
      <el-button type="success">导出</el-button>
    </div>
    <div class="card" style="margin-bottom: 5px">
      <el-table :data="filteredTableData" stripe>
        <el-table-column label="日期" prop="date"/>
        <el-table-column label="名称" prop="name"/>
        <el-table-column label="地点" prop="address"/>
      </el-table>
      <div style="margin-top: 15px">
        <el-pagination
          :current-page="data.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, computed } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElInput, ElButton, ElTable, ElTableColumn, ElPagination } from 'element-plus';

const data = reactive({
  name: '',
  tableData: [
    { id: 1, date: '2024-01-01', name: '张三', sex: '男', age: '18', address: '北京' },
    { id: 2, date: '2024-01-01', name: '李四', sex: '女', age: '18', address: '北京' },
    { id: 3, date: '2024-01-01', name: '王五', sex: '男', age: '18', address: '北京' },
    { id: 4, date: '2024-01-01', name: '赵六', sex: '女', age: '18', address: '北京' },
    { id: 5, date: '2024-01-01', name: '钱七', sex: '男', age: '18', address: '北京' },
    { id: 6, date: '2024-01-01', name: '孙八', sex: '女', age: '18', address: '北京' },
    { id: 7, date: '2024-01-01', name: '李九', sex: '男', age: '18', address: '北京' },
    { id: 8, date: '2024-01-01', name: '吴十', sex: '女', age: '18', address: '北京' },
    { id: 9, date: '2024-01-01', name: '郑十一', sex: '男', age: '18', address: '北京' },
  ],
  pageNum: 1,
  pageSize: 10,
  total: 47,  
});

const filteredTableData = computed(() => {
  return data.tableData.filter(item => item.name.includes(data.name));
});

const handleSizeChange = (newPageSize) => {
  data.pageSize = newPageSize;
};

const handleCurrentChange = (newPageNum) => {
  data.pageNum = newPageNum;
};
</script>

<style scoped>

</style>
